<template>
  <el-row class="table-toolbar">
    <el-col :span="12">
      <slot/>
    </el-col>

    <el-col :span="12" class="table-toolbar-setting">
      <template v-if="stripe != null">
        <!-- 表格斑马纹 -->
        <el-tooltip :content="$t('table.toolbar.stripe')" placement="top">
          <el-switch v-model="stripe" :active-text="$t('open')" :inactive-text="$t('off')" inline-prompt/>
        </el-tooltip>
        <el-divider direction="vertical"/>
      </template>

      <!-- 刷新 -->
      <el-tooltip :content="$t('table.toolbar.refresh')" placement="top">
        <i class="action-icon icon" @click="emits('refresh')">
          <SvgIcon icon="ep:refresh-right"/>
        </i>
      </el-tooltip>

      <!-- 查询表单控制 -->
      <el-tooltip v-if="showQueryForm != null" :content="showQueryForm ? $t('table.toolbar.queryForm.collapse') : $t('table.toolbar.queryForm.expand')" placement="top">
        <i class="action-icon icon" @click="switchShowQueryForm()">
          <SvgIcon icon="ep:search"/>
        </i>
      </el-tooltip>

      <!-- 密度 -->
      <el-tooltip v-if="size != null" :content="$t('table.toolbar.density')" placement="top">
        <ToolbarDensity v-model="size">
          <i class="action-icon icon">
            <SvgIcon icon="column-height-outlined"/>
          </i>
        </ToolbarDensity>
      </el-tooltip>

      <!-- 列设置  -->
      <el-tooltip v-if="$attrs.columns != null" :content="$t('table.toolbar.columnSetting')" placement="top">
        <ToolbarColumnSetting v-bind="$attrs">
          <i class="action-icon icon">
            <SvgIcon icon="ep:setting"/>
          </i>
        </ToolbarColumnSetting>
      </el-tooltip>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import ToolbarColumnSetting from './toolbar-column-setting.vue';
import ToolbarDensity from './toolbar-density.vue';
import type { ComponentSize } from 'element-plus';
import { SvgIcon } from '@/components/icon';

defineOptions({
  inheritAttrs: false,
});

const size = defineModel<ComponentSize>('size');
const stripe = defineModel('stripe');
const showQueryForm = defineModel('showQueryForm');
const emits = defineEmits(['refresh']);

const switchShowQueryForm = () => {
  showQueryForm.value = !showQueryForm.value;
};
</script>

<style lang="scss" scoped>
.table-toolbar {
  .table-toolbar-setting {
    display: flex;
    gap: 14px;
    line-height: 32px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;

    :deep(.el-divider) {
      margin: 0 3px;
    }

    .action-icon {
      cursor: pointer;
      font-size: 18px;
      color: var(--el-text-color-primary);
    }
  }
}
</style>
